import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    ScrollView
} from 'react-native';

export default class MyScrollView extends Component {
    _onScrollBeginDrag(){
        console.log("开始拖拽")
    }
    _onScrollEndDrag(){
        console.log("结束拖拽")
    }
    _onMomentumSrcollBegin(){
        console.log("开始滑动")
    }
    _onMomentumSrcollEnd(){
        console.log("滑动结束")
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView 
                    style={styles.scrollView}
                    showVerticalScrollIndicator={true}
                    onScrollBeginDrag={this._onScrollBeginDrag}
                    onScrollEndDrag={this._onScrollEndDrag}
                    onMomentumSrcollBegin={this._onMomentumSrcollBegin}
                >
                    <View style={styles.view_1}></View>
                    <View style={styles.view_2}></View>
                    <View style={styles.view_3}></View>
                </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'cyan',
    },
    scrollView: {
        marginTop: 25,
        backgroundColor: "#CCCCCC"
    },
    view_1: {
        margin: 15,
        flex: 1,
        height: 300,
        backgroundColor: "yellow",
    },
    view_2: {
        margin: 15,
        flex: 1,
        height: 300,
        backgroundColor: "green",
    },
    view_3: {
        margin: 15,
        flex: 1,
        height: 300,
        backgroundColor: "blue",
    },
})